import React, { useState, useEffect } from 'react'
import { Input, Button, message } from 'antd'
import { getExamType, getExamSubject, getQuestionsType, addQuestions } from '../../api/exam'
import { useExam } from '../../hooks/exam'
import MySelect from './components/MySelect'
import { Editor, Toolbar } from '@wangeditor/editor-for-react'

import '@wangeditor/editor/dist/css/style.css' // 引入 css


export default function AddExam() {
    const [title, setTitle] = useState("")
    // 富文本编辑器
    const [editor, setEditor] = useState(null) // 存储 editor 实例
    const [questions_stem, setQuestionsStem] = useState('') // 编辑器内容

    const [editor1, setEditor1] = useState(null) // 存储 editor 实例
    const [questions_answer, setQuestionsAnswer] = useState('') // 编辑器内容

    // 把逻辑给抽离
    const examType = useExam(getExamType)
    const examSubject = useExam(getExamSubject)
    const QuestionsType = useExam(getQuestionsType)
    // console.log(examType)

    // 
    const toolbarConfig = {}
    const editorConfig = {
        placeholder: '请输入内容...',
    }

    // 及时销毁 editor ，重要！
    useEffect(() => {
        return () => {
            if (editor == null) return
            editor.destroy()
            setEditor(null)
        }
    }, [editor])
    return (
        <div>
            <h3>
                题目信息
            </h3>

            <div>
                <p>题干</p>
                <div>
                    <Input value={title} onChange={(ev) => {
                        setTitle(ev.target.value)
                    }}/>
                </div>
            </div>

            <div>
                <p>题目主题</p>
                <div>
                    <div style={{ border: '1px solid #ccc', zIndex: 100 }}>
                        <Toolbar
                            editor={editor}
                            defaultConfig={toolbarConfig}
                            mode="default"
                            style={{ borderBottom: '1px solid #ccc' }}
                        />
                        <Editor
                            defaultConfig={editorConfig}
                            value={questions_stem}
                            onCreated={setEditor}
                            onChange={(editor) => {
                                console.log(editor.getHtml())
                                return setQuestionsStem(editor.getHtml())
                            }}
                            mode="default"
                        />
                    </div>
                </div>
            </div>
            <MySelect name="exam_name" type="exam_id" title="考试类型" list={examType} />
            <MySelect name="subject_text" type="subject_id" title="课程类型" list={examSubject} />
            <MySelect name="questions_type_text" type="questions_type_id" title="题目类型" list={QuestionsType} />

            <div>
                <p>答案信息</p>
                <div>
                    <div style={{ border: '1px solid #ccc', zIndex: 100 }}>
                        <Toolbar
                            editor={editor1}
                            defaultConfig={toolbarConfig}
                            mode="default"
                            style={{ borderBottom: '1px solid #ccc' }}
                        />
                        <Editor
                            defaultConfig={editorConfig}
                            value={questions_answer}
                            onCreated={setEditor1}
                            onChange={(editor) => {
                                console.log(editor.getHtml())
                                return setQuestionsAnswer(editor.getHtml())
                            }}
                            mode="default"
                        />
                    </div>
                </div>
            </div>
            
            <div>
                <Button type="primary" onClick={() => {
                    let examInfo = {
                        title,
                        questions_stem,
                        questions_answer,
                        user_id: sessionStorage.getItem("user_id"),
                        exam_id: sessionStorage.getItem("exam_id"),
                        subject_id: sessionStorage.getItem("subject_id"),
                        questions_type_id: sessionStorage.getItem("questions_type_id")
                    } 
                    addQuestions(examInfo).then(res => {
                        message.success(res.data.msg)
                    })
                }}>提交</Button>
            </div>
        </div>
    )
}
